<template>
  <section>
  <!-- 优化下这里的样式，这里显示数据源以及当前选择数据库，并且显示行与下面的form行距合适   -->
    <div style="margin-bottom: 10px;">
      <span>
        当前数据源： <Tag color="green">{{ props.data.dsName }} </Tag></span
      >&nbsp;&nbsp;&nbsp;&nbsp;
      <span>
        当前数据库： <Tag color="green"> {{ props.data.databaseName }}</Tag></span
      >
    </div>
    <div>
      <!-- 这里使用Form布局，并且使用inline模式，并且与fieldList的行距合适  -->
      <div style="margin-bottom: 10px;">
      <Form layout="inline" :model="formModel">
        <Form.Item label="名称">
          <!-- <a-radio-group v-model:value="formState.layout">
            <a-radio-button value="horizontal">Horizontal</a-radio-button>
            <a-radio-button value="vertical">Vertical</a-radio-button>
            <a-radio-button value="inline">Inline</a-radio-button>
          </a-radio-group> -->
          <Input v-model:value="formModel.name" placeholder="请输入表名" />
        </Form.Item>
        <Form.Item label="备注">
          <Input v-model:value="formModel.comment" placeholder="请输入表备注" />
        </Form.Item>
        <Form.Item label="引擎">
          <Select v-model:value="formModel.engine" placeholder="请选择引擎">
            <Select.Option value="InnoDB">InnoDB</Select.Option>
            <Select.Option value="MyISAM">MyISAM</Select.Option>
          </Select>
        </Form.Item>

        <Form.Item>
          <Button type="primary" size="middle" @click="onCreateTable">创建表</Button>
        </Form.Item>
        <Form.Item>
          <Button type="primary" size="middle" @click="onAddBtnClick">添加字段</Button>
        </Form.Item>
      </Form>
    </div>
      <div>
        <FieldList ref="fieldListRef" :operator="fieldOperator"/>
      </div>
    </div>
  </section>
</template>

<script lang="tsx" setup>
  import { ref, onMounted, defineProps, reactive } from 'vue';
  import { Tag, Form, Button, Input, Select ,Table, Popconfirm, message } from 'ant-design-vue';
  import FieldList from './FieldList.vue';
  import {
    createTable
} from "@/api/goMyAdmin";
import { useI18n } from "@/hooks/web/useI18n";
const { t } = useI18n();

  const props = defineProps<{
    data: {
      dsId: number;
      dsName: string;
      databaseName: string;
    };
  }>();

  const formModel = reactive({
    name: '',
    comment: '',
    engine: 'InnoDB',
  });

  const emit = defineEmits(['close']);

const fieldOperator = (params: { text: string; index: number; record: any }) => {
  return (
    <div class="editable-row-operations">
      <Popconfirm
        title="危险操作"
        onConfirm={() => oneRowDeleteFieldClick(params.record, params.index)}
      >
        {{
          description: () => (
            <div style="width: 200px">
              <div>确定删除字段？</div>
              <div>请谨慎操作，可能导致数据丢失！！</div>
            </div>
          ),
          default: () => (
            <Button danger type="link" size="small">
              {t("common.delText")}
            </Button>
          ),
        }}
      </Popconfirm>
    </div>
  );
};

  const fieldListRef = ref<any>({} as any);

  const onAddBtnClick = () => {
    fieldListRef.value.onAddBtnClick();
  }


/** 行，删除字段按钮 */
const oneRowDeleteFieldClick = async (
  record: goMyAdmin.workspace.TFieldObject,
  index: number
) => {
  // 如果是isNewAdd， 则直接删除
  fieldListRef.value?.removeOne(index);
};

  const onCreateTable = async () => {
    // 获取table fieldList  
    console.log(formModel)
    let list = fieldListRef.value.getListData();
    console.log(list)

    await createTable({
      dsId: props.data.dsId,
      databaseName: props.data.databaseName,
      tableName: formModel.name,
      fields: list,
      tableArgs: {
        engine: formModel.engine,
        comment: formModel.comment,
      },
    });

    emit('close');
  }
</script>

<style lang="less" scoped></style>
